<template>
	<div class="search">
		<Header :isLeft="true" title="搜索">		</Header>
			<div class="search_header">
				<form action="" class="search_wrap">
					<i class="fa fa-search"></i>
					<input type="text" v-model="key_word" placeholder="请输入商家信息">
					<button @click.prevent="searchHandle">搜索</button>
				</form>
			</div>
			<div class="shop" v-if="result">
				<div class="empty_wrap" v-show="empty&&!showShop">
					<img src="https://fuss10.elemecdn.com/d/60/70008646170d1f654e926a2aaa3afpng.png" alt="">
					<div class="empty_txt">
						<h4>附近没有搜索结果</h4>
						<span>换个关键词试试吧</span>
						</div>
				</div>
				<div v-show="!empty&&!showShop">
					<search :data="result.restaurants" @click.native="$router.push('/shop')"></search>
					<search @searchClick="shopItemClick" :data="result.words"></search>
				</div>
			</div>
			<div class="container" v-show="true">
				<FilterView :filterData="filterData" @update="update" :class="{filteritem:true}"></FilterView>
				<div class="shoplist"   v-infinite-scroll="loadMore"  :infinite-scroll-disabled="loading">
					<IndexShop v-for="item,index in restaurants" :key="index" :restaurant="item.restaurant"></IndexShop>
				</div>
			</div>
			
			
	</div>
</template>

<script>
	import Search from '../components/searchIndex.vue'
	import Header from '../components/Header.vue'
	import FilterView from '../components/Filter.vue'
	import IndexShop from '../components/indexShop.vue'
	import { InfiniteScroll } from 'mint-ui';
	export default{
		components:{
			Header,
			Search,
			FilterView,
			IndexShop
		},
		data(){
			return{
				key_word:"",
				result:null,
				empty:false,
				showShop:false,
				filterData:null,
				data:null,
				restaurants:[],
				page:0,
				size:7,
				loading:false,
				data:null
			}
		},
		watch:{
			key_word(){
				this.empty=false;
				this.showShop=false
				this.keyWordChange()
			}
		},
		created() {
			this.$axios("https://ele-interface.herokuapp.com/api/profile/filter").then(res=>{
				console.log(res)
				this.filterData=res.data
				if(res.data.length>0){
					res.data.forEach(item=>{
						this.restaurants.push(item)
					})
				}else{
					//数据加载完了
					this.loading=true;
				}
			})
		},
		methods:{
			loadMore(){
				console.log('fsd')
				this.page++;
				this.$axios.post(`/api/profile/restaurants/${this.page}/${this.size}`,this.data).then(res=>{
				//加载完之后重新渲染
						console.log(res)
						this.restaurants=res.data
					})
			},
			keyWordChange(){
				this.$axios(`https://ele-interface.herokuapp.com/api/profile/typeahead/${this.key_word}`).then(res=>{
					console.log(res)
					this.result=res.data;
				}).catch(err=>{
					this.result=null;
				})
			},
			searchHandle(){
				if(!this.key_word){
					return;
				}
				if(this.result&&this.result.restaurants.length>0||this.result.words.length>0){
					this.shopItemClick();
				}else{
					this.empty=true;
					this.key_word=""
				}
			},
			shopItemClick(){
				// this.page=0;
				// this.restaurants=[]
				this.showShop=true;	
			},
			update(condition){
				this.data=condition
				this.shopItemClick();
				
			}
		}
	}
</script>

<style scoped>

.search {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.search_header {
  margin-top: 45px;
  background: #fff;
  padding: 0 4.266667vw;
}
.search_header .search_wrap {
  padding: 2.933333vw 2.933333vw 2.933333vw 0;
  display: flex;
  align-items: center;
  position: relative;
}
.search_wrap .fa-search {
  width: 2.933333vw;
  height: 2.933333vw;
  color: #888;
  position: absolute;
  top: 4.6666666vw;
  left: 2.933333vw;
}
.search_wrap input {
  flex-grow: 1;
  border-radius: 0.266667vw;
  background-color: #f8f8f8;
  padding: 1.733333vw 4vw 1.733333vw 8.8vw;
  color: #666;
  outline: none;
  border: none;
}
.search_wrap button {
  outline: none;
  border: none;
  color: #333;
  font-size: 0.426667rem;
  background: #fff;
  font-weight: 700;
  margin-left: 2.933333vw;
  font-size: 14px;
}

.shop {
  width: 100%;
  height: calc(100% - 95px);
  overflow: auto;
}

.empty_wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  display: flex;
  justify-content: center;
}
.empty_wrap img {
  width: 35vw;
  height: 35vw;
}
.empty_txt h4 {
  color: #666;
  font-size: 1rem;
  margin: 12vw 0 2vw 0;
}
.empty_txt span {
  color: #999;
  font-size: 0.8rem;
}
/* .filter_wrap{
	width: 100%;
	position: absolute;
	top: 96px;
} */
.filter{
		display: flex;
	  
	}
	.filter-nav{
		flex: 1;
		text-align: center;
		padding: 10px 0;
	}
	.filteritem{
		width: 100%;
		background-color: #FFFFFF;
		position: relative;
		top: 0px !important;
		z-index: 91;
	}
	/* .shoplist::before{
		content: '';
		display: block;
		height: 35px;
	} */
</style>